<template>
  <div>
    <div class="main">
      <div class="title">
        <h1 class="title-bold">{{list.title}}</h1>
        <h6>{{list.text}}</h6>
        <h6>{{list.user}}</h6>
        <h6>{{list.time}}</h6>
      </div>
      <div class="content" v-for="(item, index) in list.detail" :key="index">
        <p>{{item}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'articleDetail',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.axios.get('api/articleDetail', {
      params: {
        id: this.$route.query.id
      }
    }).then((res) => {
      this.list = res.data[0]
      const time = new Date(this.list.time)
      const resDate = time.getFullYear() + '-' + this.p((time.getMonth() + 1)) + '-' + this.p(time.getDate())
      const resTime = this.p(time.getHours()) + ':' + this.p(time.getMinutes()) + ':' + this.p(time.getSeconds())
      this.list.time = `${resDate} ${resTime}`

      let detailList = res.data[0].detail
      detailList = detailList.split('\n')
      this.list.detail = detailList
    })
  },
  methods: {
    p (s) {
      return s < 10 ? '0' + s : s
    }
  }
}
</script>

<style lang='stylus' scoped>
  h6
    margin 0.63rem
  .title
    color #555
    font-size 1.3rem
    .title-bold
      // font-size 2rem
      font-weight bold
      margin-bottom 0rem
  .main
    background-color #fff
    padding 1rem
    .content
      text-align left
</style>
